import React from 'react'
import {connect} from 'react-redux'
import {incrAction} from '@/store/actions/counterAction'
function Counter(props) {
  console.log('Counter组件',props);
  return (
    <div>
        <h1>react-redux版的计数器</h1>
        <h2>{props.count}</h2>
        <button onClick={()=>{
            props.commit(incrAction(2))
        }}>+</button>
    </div>
  )
}
/**
 * 高阶组件增强的数据全部使用本组件的props来接收
 * connect(参数1，参数2)(组件名)
 * 参数1：是一个函数，这个函数的作用作用是将store中state状态映射props,这个映射函数的参数就是state(来自仓库中的state)
   参数2：是一个函数，这个函数的是讲store中的dispatch映射到组件的props中
   高阶组件connect的作用：就是负责将store仓库和组件连接在一起，可以将组件中的dispatch直接映射到组件的props上
   然后，也可以在第一个（）中，有两个参数，第1个参数负责将store仓库中的state映射到组件的props上，第2个参数负责将
   store仓库中的dispatch映射到组件的props上，这个优先级是高
   高阶组件的是适合在hook出现之前的，目前还有一些遗留的项目还在使用

*/
const mapStateToProps=(state)=>{
    console.log('mapStateToComponent',state);
    return{
        count:state.count
    }
}
const mapDisptchToProps=(arg)=>{
    //console.log('mapDisptchToProps',arg);
    return{
        commit:arg
    }
}
export default connect(mapStateToProps,mapDisptchToProps)(Counter)


